/** markDown标记插件 */
import { NormalToolbar } from 'md-editor-rt';
import { useState, useRef, useEffect } from 'react';

interface AutoSaveExtension {
  activate?: boolean;
  content?: string;
  time?: number;
}

const MarkExtension = ({ activate = false, content, time = 2000 }: AutoSaveExtension) => {
  const [flag, setFlag] = useState(activate);
  // 自动保存
  const taskId = useRef(-1);
  useEffect((): any => {
    if (flag) {
      clearInterval(taskId.current);
      taskId.current = window.setTimeout(() => {
        console.log('已自动保存');
      }, time);

      return () => {
        clearInterval(taskId.current);
      };
    }
  }, [content]);
  return (
    <NormalToolbar
      title="自动保存"
      onClick={() => setFlag(!flag)}
      trigger={
        <svg
          className="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          width="22"
          height="22"
        >
          <path
            d="M895.83 62.102c31.761 5.294 52.935 26.468 60.876 52.935 7.94 18.527 5.294 82.049 5.294 108.517v616.695c0 18.527 0 42.349-2.647 55.582-2.647 31.761-23.821 52.935-50.288 60.876-18.527 7.94-84.697 5.294-108.517 5.294-206.447 0-412.895 0-619.342 0-15.881 0-39.701 0-55.582-2.647-29.115-2.647-52.935-23.821-60.876-50.288-5.294-18.527-2.647-84.697-2.647-108.517v-619.342c0-15.881 0-37.055 0-52.935 5.294-31.761 26.467-52.935 52.935-63.522 18.527-5.294 82.049-2.647 108.517-2.647 206.447 0 410.248 0 616.695 0 15.881 0 39.701 0 55.582 0zM334.719 361.186h354.666c10.587 0 13.234-5.294 13.234-13.234v-230.268h-381.133v222.328c0 15.881-2.647 21.173 13.234 21.173zM758.2 117.684v248.796c0 37.055-7.94 50.288-44.994 50.288-97.93 0-370.546 0-418.188 0-21.173 0-29.115-10.587-29.115-37.055v-262.029c-31.761 0-84.697 0-116.458 0-15.881 0-26.467 0-29.115 10.587-2.647 7.94-2.647 137.632-2.647 156.158v592.874c0 13.234 0 23.821 13.234 26.467 5.294 2.647 137.632 2.647 156.158 2.647 52.935 0 58.228 0 111.164 0v-179.979h227.621v179.979c74.109 0 111.164 0 187.92 0 10.587 0 74.109 0 79.403-2.647 10.587-2.647 13.234-10.587 13.234-26.467v-669.63c0-13.234 0-68.815-2.647-76.756-2.647-13.234-18.527-13.234-26.467-13.234-34.408 0-84.697 2.647-119.104 0zM453.823 903.772l116.458 2.647v-124.398h-116.458v121.751z"
            fill={flag ? '#1296db' : '#2c2c2c'}
          />
        </svg>
      }
    />
  );
};

export default MarkExtension;
